<template>
	<view class="pageview">
		<cl-navbar :title="detailsInfo.nick_name" leftIconSize="40rpx" autoBack bgColor="transparent" :isbgColor="false">
		</cl-navbar>
		<view class="pageContent">
			<view class="lunboview">
				<u-swiper :list="getswiper" indicator indicatorMode="dot" height="720rpx" radius="0"></u-swiper>
			</view>
			<view class="introduce">
				{{detailsInfo.profile}}
			</view>
			<view class="tagView">
				<view class="tagView__title">
					{{$t("astral.details.profile")}}
				</view>
				<view class="tagView__tags">
					<view v-for="(item,index) in detailsInfo.label_names" :key="index" class="tagView__tags__item">{{item}}</view>
				</view>
			</view>
			<view class="stateView">
				<view class="stateView__title">
					{{$t("astral.details.dynamicState")}}
				</view>
				<view class="stateView__photowall">
					<u-album :urls="getswiper" singleSize="220rpx" multipleSize="220rpx" space="15rpx"></u-album>
				</view>
			</view>
			<view class="customerview">
				{{$t("astral.details.contactService")}}
			</view>
		</view>
	</view>
</template>

<script>
	import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
	export default {
		name: 'astraldetails',
		data() {
			return {
				id:0,
				detailsInfo:{},
			}
		},
		onLoad() {
			let {id} = this.$Route.query
			this.id = id
			this.getDetail()
		},
		computed: {
			getswiper(){
				return this.detailsInfo.show_users_images && this.detailsInfo.show_users_images.map(item => item.image_url) || []
			}
		},
		onShow() {},
		methods: {
			async getDetail(){
				try{
				  let apires = await this.$api.common.showUserInfo({show_user_id:this.id})
				  if(apires){
					  for (let index in apires.data.show_users_images) {
							let item = apires.data.show_users_images[index]
							try {
								const cachedMedia = await mediaCache.loadMedia(item.image_url, 'stars','image');
								apires.data.show_users_images[index].image_url = cachedMedia;
							} catch (error) {
							   apires.data.show_users_images[index].image_url = '/static/logo.png'
							}
					  }
					  
					  this.detailsInfo = apires.data
				  }
				}catch(e){
					//TODO handle the exception
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.lunboview {
		position: relative;

		&__voice {
			position: absolute;
			bottom: 50rpx;
			right: 40rpx;
			width: 190rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&__time{
				background-image: linear-gradient(
				  180deg,
				  rgba(255, 255, 255, 1) 0,
				  rgba(229, 189, 132, 1) 100%
				);
				overflow-wrap: break-word;
				font-size: 24rpx;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.introduce {
		font-size: 24rpx;
		color: #61626e;
		margin: 40rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
	}

	.tagView {
		margin: 0 30rpx 0 30rpx;
		box-sizing: border-box;

		&__title {
			font-size: 32rpx;
			color: #FFFFFF;
		}

		&__tags {
			display: flex;
			gap: 40rpx;
			flex-wrap: wrap;
			margin-top: 20rpx;

			&__item {
				padding: 0 20rpx;
				background: #1E1F30;
				border-radius: 10rpx;
				height: 46rpx;
				line-height: 46rpx;
				font-size: 24rpx;
				color: #61626e;
			}
		}
	}

	.stateView {
		margin: 40rpx 30rpx;
		box-sizing: border-box;

		&__title {
			font-size: 32rpx;
			color: #FFFFFF;
		}

		&__photowall {
			margin-top: 20rpx;
		}
	}

	.customerview {
		position: fixed;
		bottom: 70rpx;
		left: 204rpx;
		width: 342rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: linear-gradient(270deg, #FF7B3C 0%, #FF5B7C 100%);
		border-radius: 40rpx;
	}
</style>